<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-05-25 15:45:28
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-23 08:45:15
-->
<template>
  <div class="app-container">
    <div class="head">
      <div class="staff">人员列表</div>
      <div class="search-head">
        <div>
          <el-input
            v-model="input"
            placeholder="请输入批次名称/考试名称"
            size="normal"
            clearable
            style="width: 260px"
          ></el-input>
        </div>
        <div>
          <el-button type="primary" size="default" @click="search">
            搜索
          </el-button>
        </div>
      </div>
      <div class="newAdd">
        <el-button
          size="default"
          @click="Add"
          class="btn"
          style="margin-right: 10px"
          >+ 新增学员</el-button
        >
        <el-dropdown>
          <el-button class="el-icon-more"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item> 导入 </el-dropdown-item>
            <el-dropdown-item> 导出 </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="new-search">
      <div class="search">
        <span>场景：</span>
        <el-select
          v-model="value"
          ref="sel"
          clearable
          @visible-change="(v) => visibleChange(v, 'sel', selClick, admClick)"
          class="sel-sence"
          @change="querySceneList"
        >
          <el-option
            v-for="item in options"
            :key="item.sceneId"
            :label="item.name"
            :value="item.sceneId"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          icon="iconfont icon-shaixuan"
          size="default"
          @click="screen"
        >
          高级筛选
        </el-button>
      </div>
    </div>
    <div v-if="scenArr !== []" class="scenF">
      <div v-for="(item, index) in scenArr" :key="index" class="scenF-content">
        <div class="scenF-detail" @click="scenSearch(item.sceneId)">
          {{ item.sceneList }}
          <i
            class="el-icon-circle-close"
            @click.stop="scenDel(index)"
            style="margin-left: 10px"
          ></i>
        </div>
      </div>
    </div>
    <el-table
      :data="staffList"
      style="width: 100%"
      :header-cell-style="{
        background: '#F5F8FA',
      }"
      row-key="id"
      :height="tableHight"
      @selection-change="handleSelectionChange"
    >
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection" width="55" reserve-selection>
      </el-table-column>
      <template v-for="(item, index) in switchShow">
        <el-table-column
          :key="index"
          :label="item.label"
          :prop="item.stage"
          :width="item.width"
          fixed
        >
        </el-table-column>
      </template>
      <!-- <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <span style="color: #1267fa" @click="gotoSignUp(scope.row)">
            报名
          </span>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="footer">
      <div>
        <el-button
          type="primary"
          size="default"
          @click="$router.push('/register/onlineregistration')"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          size="default"
          @click="registration"
          :disabled="disabled"
        >
          下一步
        </el-button>
      </div>
      <!-- 分页器 -->
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <detail-sign
      :dialogObj="dialogObj"
      v-if="dialogObj.detailEject"
      :signUp="signUp"
    ></detail-sign>
    <screen
      :dialogObj="dialogObj"
      @sceneArr="sceneArr"
      :switchShow="switchShow"
    ></screen>
    <drag-table
      :dialogObj="dialogObj"
      v-if="dialogObj.senceAdminEject"
      ref="dragTable"
    ></drag-table>
    <new-staff :dialogObj="dialogObj"></new-staff>
  </div>
</template>

<script>
import { queryScene } from "@/api/currency";
import { getexaminerList, addStudent, getCustom } from "../../api/registration";
import Screen from "./conponents/staffList/screen.vue";
import detailSign from "./conponents/onLine/detailSign.vue";
import DragTable from "./conponents/staffList/dragTable.vue";
import NewStaff from "./conponents/staffList/newStaff.vue";
var newForm = {
  name: "",
  phoneNumber: "",
  idNumber: "",
  sex: "1",
  idPositive: "",
  idBack: "",
  idPhoto: "",
};
export default {
  components: { detailSign, Screen, DragTable, NewStaff },
  data() {
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的手机号"));
    };
    let checkId = (rule, value, callback) => {
      // 验证身份证的正则表达式
      const regId =
        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (regId.test(value)) {
        // 合法的身份证号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的身份证号码"));
    };
    return {
      tableHight: window.innerHeight - 330,
      scenArr: [],
      // 控制表单的显示与隐藏
      switchShow: [
        {
          value: true,
          label: "姓名",
          stage: "name",
        },
        {
          value: true,
          label: "手机号",
          stage: "phoneNumber",
          width: "150px",
        },
        {
          value: true,
          label: "性别",
          stage: "sex",
        },
        {
          value: true,
          label: "公司",
          stage: "companyName",
          width: "180px",
        },
        {
          value: true,
          label: "部门",
          stage: "deptName",
        },
        {
          value: true,
          label: "身份证号",
          stage: "idNumber",
          width: "220px",
        },
        {
          value: true,
          label: "生日",
          stage: "birthday",
          width: "140px",
        },
        {
          value: true,
          label: "文化程度",
          stage: "education",
        },
        {
          value: true,
          label: "工作状态",
          stage: "jobState",
        },
        {
          value: true,
          label: "负责人",
          stage: "userName",
        },
        {
          value: true,
          label: "最后更新时间",
          stage: "uploadTime",
          width: "120px",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
        },
      ],
      multipleSelection: [],
      signUp: [],
      dialogObj: {
        dialogStaffVisble: false,
        detailShow: false,
        detailEject: false,
        dialogScreenVisible: false,
        senceAdmin: false, //场景管理
        senceAdminEject: false,
        dialogStaffVisble: false,
      },
      pageSize: 10,
      pageNum: 1,
      options: [],
      total: 0,
      labelPosition: "top",
      addForm: {
        ...newForm,
      },
      staffShow: false,
      disabled: true,
      input: "",
      value: "",
      staffList: [],
      addRules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        phoneNumber: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          { required: true, validator: checkMobile, trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择员工性别", trigger: "change" }],
        idNumber: [
          {
            required: true,
            message: "请输入员工身份证号",
            trigger: "blur",
          },
          {
            required: true,
            validator: checkId,
            trigger: "blur",
          },
        ],
        idPositive: [
          { required: true, message: "请上传身份证正面照", trigger: "change" },
        ],
        idBack: [
          { required: true, message: "请上传身份证反面照", trigger: "change" },
        ],
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      starffList: {},
      ExaInfo: {},
    };
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  created() {
    this.ExaInfo = JSON.parse(sessionStorage.getItem("ExaInfo")) || {};
    this.getList();
    this.getScene();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    // 点击临时搜索
    scenSearch(id) {
      this.getList(id);
    },
    // 删除临时搜索
    scenDel(i) {
      this.scenArr.splice(i, 1);
      if (this.scenArr.length == 0) {
        this.getList();
      }
    },
    // 请求场景
    getScene() {
      queryScene({
        type: 2,
      }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.options = res.scenes;
        } else {
          this.options = res.scenes;
        }
      });
    },
    // 获取数组
    sceneArr(data) {
      this.scenArr.push(data);
    },
    // 打开高级筛选
    screen() {
      this.dialogObj.dialogScreenVisible = true;
    },
    querySceneList() {
      this.getList(this.value);
    },
    //管理
    admClick() {
      this.dialogObj.senceAdminEject = true;
      this.$nextTick(function () {
        this.dialogObj.senceAdmin = true;
      });
    },
    //新建场景
    selClick() {
      this.screen();
    },
    // 场景下拉框按钮
    visibleChange(visible, refName, onClick, onClick2) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>新建场景</span>
                            </li>
                        `;
          const el2 = document.createElement("ul");
          el2.className = "el-cascader-menu__list";
          el2.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>管理</span>
                            </li>
                        `;
          popper.appendChild(el);
          popper.appendChild(el2);
          el2.onclick = () => {
            onClick2 && onClick2();
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
        }
      }
    },
    search() {
      this.getList();
    },
    // 新增学员
    newStudent() {
      this.dialogObj.dialogStaffVisble = true;
      // this.$refs.addForm.validate((valid) => {
      //   if (!valid) return;
      //   var fd = new FormData();
      //   fd.append("personStr", JSON.stringify(this.addForm));
      //   addStudent(fd).then((res) => {
      //     if (res.code !== 200) return this.$message.error(res.msg);
      //     this.$message.success(res.msg);
      //     this.getList();
      //     this.staffShow = false;
      //   });
      // });
    },
    getList(val) {
      getexaminerList({
        identification: this.input,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sceneId: val,
      }).then((res) => {
        res.rows.map((item) => {
          if (item.sex == 1) {
            item.sex = "女";
          } else if (item.sex == 2) {
            item.sex = "未知";
          } else if (item.sex == 0) {
            item.sex = "男";
          }
          if (item.jobState == 1) {
            item.jobState = "在职";
          } else if (item.jobState == 2) {
            item.jobState = "离职";
          }
          if (item.education == 1) {
            item.education = "小学";
          } else if (item.education == 2) {
            item.education = "初中";
          } else if (item.education == 3) {
            item.education = "高中/中专";
          } else if (item.education == 4) {
            item.education = "专科";
          } else if (item.education == 5) {
            item.education = "大学";
          } else if (item.education == 6) {
            item.education = "研究生";
          }
        });
        this.staffList = res.rows;
        this.total = res.total;
      });
    },
    onClose() {
      this.addForm = {
        ...newForm,
      };
    },
    Add() {
      this.dialogObj.dialogStaffVisble = true;
    },
    registration() {
      this.signUp = this.multipleSelection;
      let arr = [];
      this.signUp.forEach((item) => {
        arr.push(item.id);
      });
      let fd = new FormData();
      fd.append("examType", this.ExaInfo.id);
      fd.append("ids", JSON.stringify(arr));
      fd.append("batchId", this.ExaInfo.batchId);
      fd.append("check", "true");
      getCustom(fd).then((res) => {
        if (res.code !== 200) return;
        this.dialogObj.detailEject = true;
        this.$nextTick(function () {
          this.dialogObj.detailShow = true;
        });
      });

      // this.$router.push("/detailsign");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
      this.disabled = false;
      if (val.length == 0) {
        this.disabled = true;
      }
    },
    onBeforeUpload() {
      const isIMAGE = file.type === "image/jpeg" || "image/png";
      if (!isIMAGE) {
        this.$message.error("上传文件只能是图片格式!");
      }
      return isIMAGE;
    },
    // 转换成base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    getFile(file) {
      this.getBase64(file.raw).then((res) => {
        this.addForm.idPositive = res;
      });
    },
    getFile1(file) {
      this.getBase64(file.raw).then((res) => {
        this.addForm.idBack = res;
      });
    },
    getFile2(file) {
      this.getBase64(file.raw).then((res) => {
        this.addForm.idPhoto = res;
      });
    },
    handleRemove(file) {
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    gotoSignUp(row) {
      let fd = new FormData();
      fd.append("examType", this.ExaInfo.id);
      fd.append("ids", JSON.stringify([row.id]));
      fd.append("batchId", this.ExaInfo.batchId);
      getCustom(fd).then((res) => {
        this.signUp = [];
        this.dialogObj.detailEject = true;
        this.$nextTick(function () {
          this.dialogObj.detailShow = true;
          this.signUp.push(row);
        });
      });

      // this.$router.push("/detailsign");
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  height: 56px;
  width: 100%;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  line-height: 56px;
  .search-head {
    display: flex;
  }
  .back {
    &::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-top: 3px solid #000;
      border-left: 3px solid #000;
      transform: rotate(-45deg);
    }
  }
}
.el-table {
  margin-top: 20px;
  border-bottom: 1px solid #eee;
}
.new-search {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.btn {
  background-color: #ff6a00;
  color: #fff;
}
/deep/.el-dialog {
  margin-left: 450px;
}
// /deep/ .el-dialog__body {
//   padding-top: 0;
// }
/deep/ .el-divider--horizontal {
  margin-top: 0;
}
.vertical {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  line-height: 14px;
  padding-top: 20px;
}
.vertical::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-right: 10px;
  background-color: #1267fa;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
  width: 330px;
}
.basics {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  margin-top: 17px;
  width: 330px;
  margin-right: 50px;
  margin-bottom: 0px;
}
.image {
  display: flex;
  flex-wrap: wrap;
}
.suggest {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
/deep/ .el-form-item__label {
  padding: 0;
}
.el-pagination {
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
// /deep/ .el-dialog__body {
//   padding-left: 60px;
// }
.el-form-item:nth-child(2n) {
  margin-left: 70px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.sel-sence {
  margin-right: 10px;
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
</style>